<template>
  <el-tabs class="demo-tabs" v-model="activeName" @tab-change="handleClick">
    <el-tab-pane
      v-for="(item, i) in tabsData"
      :label="`${item.name} (${item.count})`"
      :name="item.key"
    >
      <div>
        <el-input
          v-model="queryInfo.goodsName"
          placeholder="输入关键词查询"
          style="width: 200px; margin-right: 10px"
        ></el-input>
        <el-button type="" @click="getUserOrderList">查询</el-button>
      </div>
      <el-table :data="item.tableData" style="width: 100%">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="type" label="" width="80">
          <template #default="scope">
            <img
              :src="scope.row.cover"
              alt=""
              style="width: 60px; height: 60px"
            />
          </template>
        </el-table-column>
        <el-table-column prop="goodsName" label="商品信息" width="180">
          <template #default="scope">
            <span class="goods-title" @click="gotoDetail(scope.row)">
              {{ scope.row.goodsName }}
            </span>
          </template>
        </el-table-column>

        <el-table-column prop="orderNum" label="订单编号" width="180" />
        <el-table-column prop="totalPrice" label="价格" width="100" />
        <el-table-column prop="totalPrice" label="金额" width="100" />
        <el-table-column label="操作">
          <template #default="scope">
            <el-button
              v-if="isAdmin && status === 'shipped'"
              size="small"
              @click="goDelivery(scope.row)"
            >
              发货
            </el-button>

            <!-- <el-button
              v-if="isAdmin"
              size="small"
              @click="handleDelete(scope.row)"
            >
              修改
            </el-button> -->

            <el-button
              v-if="item.key === 'shipped'"
              size="small"
              @click="onRefund(scope.row)"
            >
              退款
            </el-button>

            <!-- <el-button
              v-if="!isAdmin && status === 'obligation'"
              size="small"
              @click="handleDelete(scope.row)"
              type="primary"
            >
              付款
            </el-button> -->
            <el-button
              size="small"
              type="danger"
              @click="onCancel(scope.row.id)"
              v-if="status !== 'received' && status !== 'afterSales'"
            >
              取消订单
            </el-button>
            <!-- <el-button
              size="small"
              type="primary"
              @click="showEvaluateDialog(scope.row)"
              v-if="!isAdmin && status === 'received'"
            >
              评价
            </el-button> -->

            <el-button
              size="small"
              type="primary"
              @click="showEvaluateDialog(scope.row)"
              v-if="!isAdmin && status === 'afterSales'"
            >
              查看详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-tab-pane>
  </el-tabs>

  <el-dialog
    title="商品评价"
    v-model="evaluateDialogVisible"
    width="500px"
    center
  >
    <el-form label-width="100px" :model="evaluateForm">
      <el-form-item label="商品">
        <el-input v-model="evaluateForm.info"></el-input>
      </el-form-item>

      <el-form-item label="文字描述">
        <el-input
          v-model="evaluateForm.old_password"
          type="textarea"
        ></el-input>
      </el-form-item>
      <el-form-item label="图片">
        <el-upload
          class="avatar-uploader"
          action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
          :show-file-list="false"
          :before-upload="beforeAvatarUpload"
          v-model="evaluateForm.image"
        >
          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
        </el-upload>
      </el-form-item>

      <el-form-item label="评分" required>
        <el-rate v-model="evaluateForm.rate" allow-half />
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="updatePwd">
        <el-icon style="margin-right: 6px"><Position /></el-icon>
        发 布
      </el-button>
    </span>
  </el-dialog>
</template>
<script>
import Head from '../components/Head.vue'
import {
  getUserOrder,
  getOrderDetail,
  deleteOrder,
  updateOrder
} from '../api/order.js'
export default {
  data() {
    return {
      isAdmin: JSON.parse(window.localStorage.getItem('user_info')).role === 1,
      userInfo: JSON.parse(window.localStorage.getItem('user_info')),
      activeName: 'obligation',
      status: 'obligation',
      queryInfo: {
        pageNum: 1,
        pageSize: 10,
        goodsName: ''
      },

      tabsData: [
        {
          name: '待付款',
          key: 'obligation',
          count: 0,
          tableData: []
        },
        {
          name:
            JSON.parse(window.localStorage.getItem('user_info')).role === 1
              ? '待发货'
              : '待收货',
          key: 'shipped',
          count: 0,
          tableData: []
        },
        {
          name: '已送达',
          count: 0,
          key: 'received',
          tableData: []
        },
        {
          name: '已完成',
          count: 0,
          key: 'afterSales',
          tableData: []
        }
      ],
      evaluateDialogVisible: false,
      evaluateForm: {}
    }
  },
  methods: {
    handleDelete(goodsId) {},
    handleClick(tab) {
      this.status = tab
    },
    showEvaluateDialog(row) {
      this.evaluateDialogVisible = true
      this.evaluateForm = row
      console.log(row)
    },
    beforeAvatarUpload(rawFile) {
      if (rawFile.type !== 'image/jpeg') {
        return false
      } else if (rawFile.size / 1024 / 1024 > 2) {
        return false
      }
      return true
    },

    onCancel(id) {
      deleteOrder(id).then(() => {
        this.getUserOrderList()
      })
    },
    getUserOrderList() {
      getUserOrder({
        // userId: this.userInfo.id,
        ...this.queryInfo
      }).then((res) => {
        this.tabsData.map((item) => {
          item.tableData = []
          item.count = 0
          return item
        })
        res.list.map((item) => {
          if (item.status === 1) {
            this.tabsData[0].tableData.push(item)
            console.log('count', this.tabsData[0].count)
            this.tabsData[0].count++
          } else if (item.status === 2) {
            this.tabsData[1].tableData.push(item)
            this.tabsData[1].count++
          } else if (item.status === 3) {
            this.tabsData[2].tableData.push(item)
            this.tabsData[2].count++
          } else if (item.status === 4) {
            this.tabsData[3].tableData.push(item)
            this.tabsData[3].count++
          }
        })
      })
    },
    goDelivery(item) {
      updateOrder({ ...item, status: 3 }).then(() => {
        this.getUserOrderList()
      })
    },
    onRefund(item) {
      updateOrder({ ...item, status: 4 }).then(() => {
        this.getUserOrderList()
      })
    },
    gotoDetail(row) {
      window.open(`#/goods/${row.goodsId}`)
    }
  },
  created() {
    this.getUserOrderList()
  }
}
</script>

<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.dialog-footer {
  display: flex;
  justify-content: end;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
.goods-title {
  cursor: pointer;
}
</style>
